<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BlueVideo聊天信息</title>
		<link rel="icon" href="img/title.ico" type="image/x-icon">
	    <link href="https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
	    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
	    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
	    <link rel="stylesheet" href="css/themify-icons.css" type="text/css">
	    <link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
	    <link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
	    <link rel="stylesheet" href="css/nice-select.css" type="text/css">
	    <link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
	    <link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
	    <link rel="stylesheet" href="css/style.css" type="text/css">
		<style type="text/css">
			.user_index{
				margin-top: 100px;
				position: relative;
				overflow: hidden;
			}
			.user_index2{
				position: absolute;bottom:20px;left:2%;width: 125px;border-radius:50%;overflow: hidden;border: 8px solid #fff;z-index: 10;padding: 0;
			}
			.user_index3{
				border: 1px solid #cecece;width: 100%;
			}
			.user_index4{
				padding: 10px;
				border-bottom: 1px solid #cecece;
				border-left: 1px solid #cecece;
				border-right: 1px solid #cecece ;
			}
			.i_span{
				display: inline-block;
				width: 30px;
				margin-right: 10px;
			}
			.i_span img{
				width: 100%;
			}
						ul li{
				list-style: none;
				position: relative;
			}
			.img_fl{
				width: 25%;border-radius:50%;overflow: hidden;position: relative;
			}
			.img_f2{
				width: 8%;border-radius:50%;overflow: hidden;position: relative;
			}
			.user_text{
				width: 60%;
				position: absolute;bottom: 0;left: 90px;
				overflow: hidden;  /*超出部分隐藏*/
				white-space: nowrap;  /*禁止换行*/
				text-overflow: ellipsis; /*省略号*/
			}
			.user_text2{
				position: absolute;bottom: -6px;left: 100px;background-color: #efefef;padding: 15px;border-radius: 10px 0 10px 0;
			}
			.user_text3{
				position: absolute;top:20px;right:90px;background-color: #efefef;padding: 15px;border-radius: 10px 0 10px 0;
			}
			.msg_body{
				width: 74.3%;overflow-y: scroll;height: 60vh;
			}
			.msg_head{
				width:300px;border-bottom: 1px solid #e1e1e1;border-right: 1px solid #e1e1e1;overflow-y: scroll;height: 60vh;
			}
			.msg_ove{
				border: 1px solid #e1e1e1;
				
			}
			.msg_body::-webkit-scrollbar{
				display: none;
			}
			.msg_head::-webkit-scrollbar-track{
			  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0);
			  background-color: rgb(255, 255, 255);
			}
			.msg_head::-webkit-scrollbar{
			  width: 6px;
			  background-color: rgb(255, 255, 255);
			}
			.msg_head::-webkit-scrollbar-thumb{
			  height:20px;
			  background-image: -webkit-gradient(linear,
			  left bottom,
			  left top,
			  color-stop(0.2, rgb(185, 231, 255)),
			  color-stop(0.4, rgb(137, 198, 255)),
			  color-stop(0.8, rgb(167, 176, 255)));
			}
			a{
			text-decoration: none;
			}
		</style>
</head>
	<body>
		    <!-- Page Preloder -->

		    
    <sql:setDataSource var="snapshot" driver="com.mysql.cj.jdbc.Driver"
	url="jdbc:mysql://localhost:3306/${ SqlName }?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC"
	user="${ SqlUser }"  password="${ SqlPass }"/>
			<sql:query dataSource="${snapshot}" var="result1">
			SELECT user_friend.user_id, user_friend.user_myfid, user_index.user_name, user_index.user_number, user_index.user_img, user_index.user_dress, user_index.user_xb FROM user_friend,user_index WHERE user_index.user_id = user_friend.user_myfid AND user_friend.user_id = ${ user.user_id };
			</sql:query>
		    
		    
			
    <!-- Header Section Begin -->
    <header class="header-section" style="position: fixed;top: 0;z-index: 99;width: 100%;">
        <div class="nav-item" style="position: relative;">
            <div class="container">
                <div class="nav-depart" style="position: fixed;left: 0;">
                    <div class="depart-btn">
                        <i class="ti-menu"></i>
                        <span><span style="color: #8fb0db;">Blue</span> VIDEO</span>
                        <ul class="depart-hover">
                            <li><a href="BlueVideoColle">我的收藏</a></li>
                            <li><a href="#">展览演出</a></li>
                            <li><a href="#">历史记录</a></li>
                        </ul>
                    </div>
                </div>
                <nav class="nav-menu mobile-menu">
                    <ul style="margin-left: 291px;">
                        <li><a href="BlueVideo">首页</a></li>
                        <li><a href="BlueVideoRec" style="border: none;">推荐</a></li>
                        <li>
                            <form action="SelectVideo" method="get">
                                <input class="primary-btn" type="text" id="username" name="selectvideo" style="margin-left:10px;background-color: #fff;color: black;border: none;">
                                <input class="primary-btn" type="submit" value="搜索" style="margin-right: 10px;margin-left: -4px;margin-top: 5px;border: none;">
                            </form>
                        </li>
                    </ul>
                    <ul style="position: fixed;right: -20px;">
                        <c:if test="${ user.user_name==null }">
                        	<li style="position: relative;"><a href="#" style="width: 100%;display: block;">
                            未登录
	                        </a>
	                        	<ul class="dropdown">
	                                <li><a href="BlueVideoLogin">去登录</a></li>
	                                <li><a href="BlueVideoReg">去注册</a></li>
	                            </ul>
	                        </li>
                        </c:if>
                        <c:if test="${ user.user_name!=null }">
                        <li>
                        	<a href="BlueVideoAdd">创作视频</a>
                        </li>
                        	<li style="position: relative;"><a href="#" style="width: 100%;display: block;">
                            <img src="img/UserImg/${ user.user_img }" style="position: absolute;top: 0;left: -20%;width: 38%;border-radius:100%;">
                            ${ user.user_name }
                            </a>
	                            <ul class="dropdown">
	                                <li><a href="BlueVideoUserIndex">个人信息</a></li>
	                                
	                                <li style="position: relative;">
	                                <a href="BlueVideoUserMsg">信息</a>
	                                <sql:query dataSource="${snapshot}" var="resultusermsgsum">
									SELECT COUNT(msg_log) AS usermsgsum FROM user_msg WHERE user_id = ${ user.user_id } AND msg_log = 1;
									</sql:query>
									
									<c:forEach var="rowusermsgsum" items="${ resultusermsgsum.rows }">
									<c:if test="${ rowusermsgsum.usermsgsum > 0 }">
									<div style="position: absolute;left:65px;top: 12px;background: red;border-radius: 50%;color: #fff;">
	                                	<div style="width: 25px;text-align:center;">${ rowusermsgsum.usermsgsum }</div>
	                                </div>
									</c:if>
	                                </c:forEach>
	                                </li>
	                                
	                                <li><a href="BlueVideoSeeUser?SeeUserid=${ user.user_id }">动态</a></li>
	                                <li><a href="BlueVideoUserMyVideo">我的视频</a></li>
	                                <li><a href="BlueVideoUserOut" style="color: #aaa000">退出登录</a></li>
	                            </ul>
	                        </li>
                        </c:if>
                    </ul>
                </nav>
                <div id="mobile-menu-wrap"></div>
            </div>
        </div>
    </header>
    <!-- Header End -->
			
			<div class="container user_index">
				<div class="row" style="position: relative;">
					<div style="background: rgba(0, 0, 0, 0.3);width: 100%;height: 100%;position: absolute;z-index: 2"></div>
					<div class="user_index2"><img src="img/UserImg/${ user.user_img }" alt="" style="width:100%;" /></div>
					<span style="position: absolute;bottom: 60px;left: 180px;color: #fff;z-index: 10;font-size: 30px;">${ user.user_name }</span>
					<div class="user_index3"><img src="img/user_bg.png" alt="" /></div>
				</div>
				<div class="row msg_ove">
					<div class="msg_head">
						<ul>
						
						<c:forEach var="row" items="${ result1.rows }">
							<c:if test="${ row.user_myfid == fid }">
								<li style="padding: 10px;background: #cecece;">
							</c:if>
							<c:if test="${ row.user_myfid != fid }">
								<li style="padding: 10px;">
							</c:if>
								<a href="BlueVideoUserMsgFriend?fid=${ row.user_myfid }&userid=${ user.user_id }">
								<p style="position: absolute;top: 15px;left: 90px;">${ row.user_name }</p>
								<div class="img_fl">
									<img src="img/UserImg/${ row.user_img }" alt="" />
								</div>
								
								<sql:query dataSource="${snapshot}" var="resultmsglog">
								SELECT COUNT(msg_log) AS msgsum FROM user_msg WHERE user_myfid = ${ row.user_myfid } AND user_id = ${ user.user_id } AND msg_log = 1;
								</sql:query>
								
								<c:forEach var="rowc" items="${ resultmsglog.rows }">
								<c:if test="${ rowc.msgsum > 0}">
								<div style="position: absolute;top: 20px;right: 20px;background: red;color: #fff;border-radius: 50%;padding: 0 1px;">
										<div style="width: 20px;text-align: center;">${ rowc.msgsum }</div>
								</div>
								</c:if>
								</c:forEach>
								
								<sql:query dataSource="${snapshot}" var="resultmsglow">
								SELECT * FROM user_msg WHERE user_myfid = ${ row.user_myfid } AND user_id = ${ user.user_id } ORDER BY msg_time desc LIMIT 1
								</sql:query>
								<c:forEach var="rowb" items="${ resultmsglow.rows }">
								<p class="user_text">${ rowb.msg_text }</p>
								</c:forEach>
								</a>
							</li>
						</c:forEach>
							
						</ul>
					</div>
					<div class="msg_body" id="msgdiv">
						<ul>
							<sql:query dataSource="${snapshot}" var="resultmsg">
								SELECT * FROM user_msg WHERE user_myfid = <c:if test="${ fid==null }">0</c:if><c:if test="${ fid!=null }">${ fid }</c:if> AND user_id = ${ user.user_id } ORDER BY msg_time ASC
							</sql:query>
						
						
							<c:forEach var="row" items="${ resultmsg.rows }">
								<c:if test="${ row.msg_to == 0 }">
									<li style="padding: 10px;">
									<div class="img_f2">
										<img src="img/UserImg/${ row.user_simg }" alt="" />
									</div>
									<p class="user_text2">${ row.msg_text }</p>
									</li>
								</c:if>
								<c:if test="${ row.msg_to == 1 }">
									<li style="padding: 10px;position: relative;">
									<div style="opacity: 0;">
										<div class="img_f2">
										<img src="img/UserImg/${ row.user_simg }" alt="" />
										</div>
										<p class="user_text2">${ row.msg_text }</p>
									</div>
																		
									<div class="img_f2" style="position: absolute;right: 10px;top: 10px;">
										<img src="img/UserImg/${ row.user_simg }" alt="" />
									</div>
									<p class="user_text3">${ row.msg_text }</p>
									</li>
							</c:if>
							</c:forEach>
							
							<div style="height: 182px;"></div>
							
							<div style="border: 1px solid #e8e8e8;position: absolute;bottom: 0;width: 74.3%;background: #fff;right: 0;">
								<form action="SeedMsg" method="post" style="display: block;position: relative;">
									<img src="img/图片.png" style="width: 30px;height: 30px;position: absolute;top:0;margin-top: 10px;margin-left: 10px;" alt="" />
									<input type="file" name="" accept="image/*" style="width: 30px;height: 30px;opacity: 0;z-index: 10;margin-top: 10px;margin-left: 10px;" /><br />
									
									<textarea name="msgtext" id="" rows="3" style="width: 100%;padding: 10px 20px;border:none;"></textarea><br />
									<input type="text" name="userid" value="${ user.user_id }" style="display: none;">
									<input type="text" name="fid" value="${ fid }" style="display: none;">
									<input type="text" name="msgto" value="1" style="display: none;">
									<input type="text" name="msgin" value="0" style="display: none;">
									<input type="text" name="usersimg" value="${ user.user_img }" style="display: none;">
									<input type="submit" value="发送" style="background: #8fb0db;color: #fff;border: none;padding: 10px 20px;margin: 0 91.7%;" />
								</form>
							</div>
						</ul>
					</div>
				</div>
			</div>
			
			
			
			
		    <!-- Js Plugins -->
		    <script src="js/jquery-3.3.1.min.js"></script>
		    <script src="js/bootstrap.min.js"></script>
		    <script src="js/jquery-ui.min.js"></script>
		    <script src="js/jquery.countdown.min.js"></script>
		    <script src="js/jquery.nice-select.min.js"></script>
		    <script src="js/jquery.zoom.min.js"></script>
		    <script src="js/jquery.dd.min.js"></script>
		    <script src="js/jquery.slicknav.js"></script>
		    <script src="js/owl.carousel.min.js"></script>
		    <script src="js/main.js"></script>
			<script type="text/javascript">
	        	window.onload = function(){
			    var div = document.getElementById('msgdiv');
			    div.scrollTop = div.scrollHeight - div.clientHeight;
				}
			</script>
		
	</body>
</html>